<template>
    <div class="box-big" v-if="currentcom && currentcom.id === id" :style="shapeAddPX(style)">
        <!-- 旋转图标 -->
        <!-- <CB></CB> -->
        <div class="xuan-icon" @mousedown="onmousesown">&#x21bb;</div>
        <div class="points top-left" @mousedown="onmousedown"></div>
        <div class="points top" @mousedown="onmousedown"></div>
        <div class="points top-right" @mousedown="onmousedown"></div>
        <div class="points right" @mousedown="onmousedown"></div>
        <div class="points bottom-right" @mousedown="onmousedown"></div>
        <div class="points bottom" @mousedown="onmousedown"></div>
        <div class="points bottom-left" @mousedown="onmousedown"></div>
        <div class="points left" @mousedown="onmousedown"></div>
    </div>
    <!-- 传递进来的动态组件 插槽 -->
    <slot></slot>
</template>
<script setup lang="ts">
import { defineProps, reactive, watch, ref, onMounted } from 'vue'
//接收父组件穿过来的数据
const { style, id }: any = defineProps(['style', 'id'])
//旋转图表
import { RefreshRight } from '@element-plus/icons-vue'
//导入pinia
import { storeToRefs } from 'pinia'
import { useComponents } from '@/stores/counter'
import { useCanvasStore } from '@/stores/index'
import shapeAddPX from '@/utils/setPx'
// import CB from '@/views/cb.vue'
const { currentcom, canvasComponents } = storeToRefs(useComponents())
const { canvasDom } = storeToRefs(useCanvasStore())
const { setStyle } = useComponents()
//当前组件默认显示的数据
currentcom.value = canvasComponents.value.length ? canvasComponents.value[canvasComponents.value.length - 1] : ""

const onmousedown = (event: any) => {
    console.log(event,"xuz呢");
    
    event.preventDefault()
    event.stopPropagation()
    //记录按下哪个点
    const currentHandle = event.target;
    const direction = currentHandle.className.split(" ")[1]
    //记录初始坐标
    const startX = event.clientX;
    const startY = event.clientY;
    //获取初始宽度和高度
    const startWidth = currentcom.value.style.width;
    const startHeight = currentcom.value.style.height;
    //获取left和top值
    const startLeft = currentcom.value.style.left;
    const startTop = currentcom.value.style.top;

    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', onmouseup)
    function resize(event: any) {
        //移动距离
        const dx = event.clientX - startX;
        const dy = event.clientY - startY;

        let width = startWidth;
        let height = startHeight;
        let left = startLeft;
        let top = startTop;
        //左边移动后 宽度增大
        if (direction.includes("left")) {
            width = startWidth - dx + 'px';
            left = startLeft + dx / 2 + 'px';
        }
        if (direction.includes('right')) {
            width = startWidth + dx + 'px';
            left = startLeft + dx / 2 + 'px';
        }

        if (direction.includes("top")) {
            height = startHeight - dy + "px";
            top = startTop + dy / 2 + "px";

        }
        if (direction.includes("bottom")) {
            height = startHeight + dy + "px";
            top = startTop + dy / 2 + "px";
        }
        let endW = dx
        let endH = dy
        if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
        setStyle(currentcom.value.id, 'width', endW)
        setStyle(currentcom.value.id, 'height', endH)

    }
    function onmouseup() {
        document.removeEventListener('mousemove', resize)
        document.removeEventListener('mouseup', onmouseup)
    }

}

//旋转

const onmousesown = (event: any) => {
    const rotateDiv: any = document.querySelector(".box-big");
    const rotateIcon = document.querySelector(".xuan-icon");
    let startingMouseAngle = 0;
    let startingRotation = 0;
    event.preventDefault()
    const rect = rotateDiv.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    startingMouseAngle = getAngle(centerX, centerY, event.clientX, event.clientY);
    startingRotation = getCurrentRotation();

    window.addEventListener("mousemove", spin);
    window.addEventListener("mouseup", stopSpin);
    function stopSpin() {
        window.removeEventListener("mousemove", spin);
        window.removeEventListener("mouseup", stopSpin);
    }
    function spin(event: { clientX: any; clientY: any; }) {
        const rect = rotateDiv.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const currentMouseAngle = getAngle(
            centerX,
            centerY,
            event.clientX,
            event.clientY
        );
        const deltaMouseAngle = currentMouseAngle - startingMouseAngle;
        let newRotation = startingRotation + deltaMouseAngle;
        newRotation = normalizeRotation(newRotation);
        rotateDiv.style.transform = `rotate(${newRotation}deg)`;
        currentcom.value.style.transform = `rotate(${newRotation}deg)`

    }
    function normalizeRotation(rotation: number) {
        if (rotation >= 0) {
            return rotation % 360;
        } else {
            return (rotation % 360) + 360;
        }
    }

    function getAngle(centerX: number, centerY: number, mouseX: number, mouseY: number) {
        return Math.atan2(mouseY - centerY, mouseX - centerX) * (180 / Math.PI);
    }

    function getCurrentRotation() {
        const transformStyle = window
            .getComputedStyle(rotateDiv)
            .getPropertyValue("transform");
        const matrix = new DOMMatrixReadOnly(transformStyle);
        const angle = Math.acos(matrix.a) * (180 / Math.PI);
        return matrix.b < 0 ? -angle : angle;
    }

}

// 从会话存储中加载图片（如果需要的话）  

const items = ref([
    // 示例数据  
    { name: 'Image 1', isImage: true, imageUrl: 'https://img1.baidu.com/it/u=.../fmt=auto?', isPink: false, size: 50 },
    // ... 其他项，包括粉红色背景的盒子等  
]);
const contextMenuVisible = ref(false);
const selectedIndex = ref(null);
const menuTop = ref(0);
const menuLeft = ref(0);
function showContextMenu(event: { clientY: number; clientX: number; }) {
    contextMenuVisible.value = true;
    menuTop.value = event.clientY;
    menuLeft.value = event.clientX;
}

function hideContextMenu() {
    contextMenuVisible.value = false;
}

function selectItem(index: any, event: any) {
    selectedIndex.value = index;
    showContextMenu(event);
}

function handleAction(action: any, index: any) {
    hideContextMenu();
    switch (action) {
        case 'delete':
            items.value.splice(index, 1);
            break;
        case 'copy':
            // 实现复制逻辑，例如将项复制到剪贴板或内部数组  
            break;
        case 'paste':
            // 实现粘贴逻辑，例如从剪贴板或内部数组粘贴项  
            break;
        case 'pin':
            const item = items.value.splice(index, 1)[0];
            items.value.unshift(item);
            break;
        case 'shrink':
            if (items.value[index].size > 10) {
                items.value[index].size -= 10;
            }
            break;
    }
}  
</script>
<style scoped>
.box-big {
    position: relative;
    width: 300px;
    height: 150px;
    /* //这要跟数据库一样宽高一样 */
    background-color: red;
    border: 2px solid #C60BF2 !important;
    transform-origin: center center;
    /* overflow: hidden; */
}

.xuan-icon {
    position: absolute;
    top: -35px;
    left: 50%;
    cursor: pointer;
    transform: translateX(-50%);
    font-size: 32px;
}

.points {
    width: 6px;
    height: 6px;
    position: absolute;
    border: 2px solid #C60BF2;
    border-radius: 50%;
}

.top-left {
    top: -6px;
    left: -3px;
    cursor: nw-resize;
}

.top {
    top: -6px;
    left: calc(50% - 3px);
    cursor: ns-resize;
}

.top-right {
    top: -6px;
    right: -5px;
    cursor: ne-resize;
}

.right {
    top: calc(50% - 3px);
    right: -5px;
    cursor: ew-resize;
}

.bottom-right {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.bottom {
    bottom: -6px;
    left: calc(50% - 3px);
    cursor: ns-resize
}

.bottom-left {
    bottom: -6px;
    left: -5px;
    cursor: sw-resize;
}

.left {
    top: calc(50% - 5px);
    left: -6px;
    cursor: ew-resize;
}



/* //明天修改这个代码  you   BUG */
</style>